<template>
  <div>
    <div class="login-head">
      <span style="color: #fff" @click="jumpFn()">
        <van-icon name="arrow-left"
      /></span>
      <span class="login-title">编辑地址</span>
      <span class="bj" @click="changeWay()">{{ title }}</span>
    </div>
    <p class="middle"></p>
    <div class="newAdress" @click="jumpAdd()">
      <p>新增地址</p>
      <p><van-icon name="arrow" /></p>
    </div>
    <ul>
      <li :key="i" v-for="(v, i) in idAredss" class="fuck">
        <p v-text="v.input"></p>
        <p v-text="v.inputPhone"></p>
        <p
          style="float: right; position: relative; bottom: 22px; left: -11px"
          @click="delete_Local()"
        >
          {{ delete_logo }}
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from "vuex";
var honey,
  a = 0;
export default {
  name: "modefyAdress",

  data() {
    return {
      idAredss: JSON.parse(window.localStorage.getItem("adressVAK")),
      title: "编辑",
      delete_logo: "",
    };
  },
  mounted() {},
  computeds: {
    ...mapState(["adressV"]),
  },
  methods: {
    changeWay() {
      $(".fuck").first().css({
        "background-color": "#FFF8C3",
      });
      a++;
      if (a % 2 == 0) {
        this.title = "编辑";
        this.delete_logo = "";
      } else {
        this.title = "完成";
        this.delete_logo = "X";
      }
    },
    jumpFn() {
      this.$router.back();
    },
    jumpAdd() {
      this.$router.push({
        name: "add_Adress",
      });
    },
    delete_Local() {
      window.localStorage.removeItem("adressVAK");

      $(".fuck").remove();
    },
  },
  watch: {},
};
</script>

<style scoped>
.login-head {
  width: 100%;
  height: 46.5312px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #0092e8;
  position: fixed;
  top: 0;
  left: 0;
}
.login-title {
  color: white;
  position: relative;
  left: 7.4px;
  font-size: 19.9985px;
}
.fuck {
  font-size: 14.5px;
  color: #333;
  box-sizing: border-box;
  padding-left: 10px;
  width: 100%;
  height: 61.75px;
  background-color: #fff;
  border-top: 1px solid #f5f5f5;
  padding-top: 13px;
  align-items: center;
}
.middle {
  margin-top: 47px;
  height: 10px;
  border-bottom: 1px solid #d9d9d9;
}
.newAdress {
  width: 100%;
  height: 44.1px;
  background-color: #fff;
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  margin-top: 10px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 8px;
}
.newAdress > p:nth-child(1) {
  color: #333;
}
.newAdress > p:nth-child(2) {
  color: rgb(216, 216, 216);
}
.bj {
  font-size: 16.5px;
  color: #fff;
  margin-right: 10px;
}
</style>  